<!-- eslint-disable vue/multi-word-component-names -->
 <!-- 联系我们页面 -->
<template>
    <div class="contact-container">
        <div class="box-1">
            <div class="text-1">如果您是</div>
            <div class="text-2">民间机构或者合伙人</div>
            <div class="text-3">有多只小动物需要联系我们进行帮助</div>
            <div class="text-4">请联系我们：</div>
            <div class="text-4">电话：17355698122</div>
            <div class="text-4">邮箱：szadoptpet@hotmail.com</div>
        </div>
        <div class="box-2">
            <div class="text-1">如果您是</div>
            <div class="text-2">某个善良的好心人</div>
            <div class="text-3">需要自己发布发现的流浪小动物</div>
            
            <div class="text-4"><RouterLink to="/admin/post-newpet" class="link">点击此处跳转至发布宠物通道</RouterLink></div>
        </div>
        <div class="box-3">
             <div class="text-1">如果您需要</div>
             <div class="text-2">网站问题反馈</div>
             <div class="text-5">请联系邮箱：szadoptpet@hotmail.com</div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.contact-container{
    width: 1200px;
    max-width: 1200px; 
    height: 800px;
    margin-top: 100px;
    position: relative;
    // border: 1px solid black;
}
.box-1{
    width: 350px;
    height: 300px;
    padding: 25px;
    position: absolute;
    top: 50px; // 距离顶部50px
    left: 230px; // 距离左侧50px
    // border: 1px solid black;
}
.box-2{
    width: 380px;
    height: 250px;
    padding: 25px;
    position: absolute;
    top: 180px; // 距离顶部50px
    right:180px ;
    background: rgba(5, 91, 92, 0.2);
}
.box-3{
    width: 400px;
    height: 220px;
    padding: 25px;
    position: absolute;
    left: 290px; // 距离左侧50px
    bottom: 160px;
    background: rgba(204, 204, 204, 0.2);
    // border: 1px solid black;
}
.text-1{
    font-size: 20px;
    color: #055B5C;
    margin-bottom: 10px;
}
.text-2{
    font-size: 30px;
    font-weight:bold;
    margin-bottom: 10px;
}
.text-3{
    font-size: 18px;
    margin-bottom: 18px;
}
.text-4{
    font-size: 17px;
    color: #055B5C;
    margin-bottom: 10px;
}
.link:hover{
    text-decoration: underline;
    color:#055B5C ;
}
.text-5{
    font-size: 17px;
    margin-top: 20px;
    color: #055B5C;
}
</style>